<template>
  <p ref="name">组件的生命周期的应用</p>
  <h3 v-for="(i,index) of banner">{{i.title}}</h3>
</template>

<script>
export default {
  name: "VueLife",
  data(){
    return{
       banner:[]
    }
  },
  beforeMount() {
    console.log(this.$refs.name);
  },
  mounted() {
    //ui渲染
    //先把结构渲染出来重要，而不是细节数据
    console.log(this.$refs.name);
    console.log(this.banner)
  },
  created() {
    //模拟网络请求
    this.banner=[
      {
        title:"aaa"
      }
    ]
  }
}
</script>

<style scoped>

</style>
